<template>
    <div class="single-selection common-cascader">
        <div class="course-sub clear">
            <span>学段</span>
            <div class="course-li clear">
                <label v-for="(item,index) of sectionData" :key="item.id" @change="getGradeData(index,item.id)">
                    <input type="radio" name="course2" :checked="index == sectionChecked" />
                    <span>{{ item.name }}</span>
                </label>
            </div>
        </div>
        <div class="course-sub clear">
            <span>年级</span>
            <div class="course-li clear">
                <label v-for="(item, index) of gradeData" :key="index" @change="getSubjectData(index,item.id)">
                    <input type="radio" name="course3" :checked="index == gradeChecked" />
                    <span>{{ item.name }}</span>
                </label>
            </div>
        </div>
        <div class="course-sub clear">
            <span>科目</span>
            <div class="course-li clear">
                <label v-for="(item, index) of subjectData" :key="item.id" @change="subjectChange(index, item.id)">
                    <input type="radio" name="course4" :checked="index == subjectChecked" />
                    <span>{{ item.name }}</span>
                </label>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
    
        },
        data() {
            return {
                //首页资源页面的带参数跳到资源列表页的时候
                sectionId:null,
                gradeId:null,
                subjectId:null,
                
                sectionData:[],
                sectionChecked:0,
                study_section_id: 0,

                gradeData:[],
                gradeChecked:0,
                grade_id: 0,

                subjectData:[],
                subjectChecked:0,
                subject_id: 0,

            };
        },
        mounted() {
            if(this.$route.params.sectionId) {
                this.sectionId = this.$route.params.sectionId;
                this.gradeId = this.$route.params.gradeId;
                this.subjectId = this.$route.params.subjectId;
                // this.getResource();
            }
            
            this.getSectionData();
        },
        computed:{
            orgUrl(){
                 return this.$store.getters.isMulti ? 'api/newlevel/platform_org' : 'api/org/org';
            },
            subUrl(){
                 return this.$store.getters.isMulti ? 'api/newlevel/platform_subject' : 'api/cate/subject';
            }
        },
        beforeDestroy() {},
        methods: {
            //获取学段
            getSectionData() {
                let params = {
                    level: 2,
                    pid: 1,
                    direction: 'balance',
                };
                const success = res => {
                    this.sectionData = res.data;
                    this.sectionData.unshift({ id: 0, name: '全部' });

                    if(this.sectionId){
                        const Inx = this.sectionData.findIndex(x => x.id === this.sectionId);
                        this.getGradeData(Inx,this.sectionId);
                        this.sectionId = null;
                    }else{
                        this.getGradeData(0,this.sectionData[0].id);
                    }
                    
                };
                this.$ajax.get(this.orgUrl, {
                    params: params,
                    func: { success: success }
                });
            },
            //获取年级
            getGradeData(index, sectionId) {
                this.sectionChecked = index;
                this.study_section_id = sectionId;
                let params = {
                    level: 3,
                    pid: sectionId === 0 ? null:sectionId,
                    direction: 'balance'
                };
                const success = res => {
                    this.gradeData = res.data;
                    this.gradeData.unshift({ id: 0, name: '全部' });

                    if(this.gradeId){
                        const Inx = this.gradeData.findIndex(x => x.id === this.gradeId);
                        this.getSubjectData(Inx,this.gradeId);
                        this.gradeId = null;
                    }else{
                        this.getSubjectData(0,0);
                    }
                };
                this.$ajax.get(this.orgUrl, {
                    params: params,
                    func: { success: success }
                });
            },
            //获取学科
            getSubjectData(index,gradeId) {
                this.gradeChecked = index === undefined ? 0 : index;
                let params = {
                    org_id: gradeId===0?this.study_section_id:gradeId,
                    type: 2,
                    status: 1
                };
                const success = res => {
                    this.subjectData = res.data;
                    this.subjectData.unshift({ id: 0, name: '全部' });
                    this.grade_id = gradeId;
                    if(this.subjectId){
                        this.subjectChecked = this.subjectData.findIndex(x => x.id === this.subjectId);
                        this.subject_id = this.subjectId;
                        this.subjectId = null;
                    }else{
                        this.subjectChecked = 0;
                        this.subject_id = 0;
                    }

                    this.getResource();
                };
                this.$ajax.get(this.subUrl, {
                    params: params,
                    func: { success: success }
                });
            },
            subjectChange(index,id) {
                this.subjectChecked = index;
                this.subject_id = id;
                this.getResource();
            },
            getResource(){
                const res = {
                    study_section_id: this.study_section_id,
                    grade_id: this.grade_id,
                    subject_id: this.subject_id,
                };
                this.$emit('resChosed', res)
            }
        }
    }

</script>

<style lang="scss">
.single-selection{
    .course-sub {
        font-size: 14px;
        line-height: 19px;
        margin-bottom: 10px;
    }

    .course-sub > span {
        display: block;
        float: left;
        color: #666666;
        width: 60px;
        overflow: hidden;
        height: 19px;
        text-align: left;
    }

    .course-sub:last-of-type {
        margin-bottom: 0;
    }

    .course-li {
        margin-left: 60px;
        min-height: 29px;
    }

    .course-li > label {
        float: left;
        color: #000000;
        cursor: pointer;
        margin: 0 3.7735849057% 10px 0;
    }

    .course-li > label > input:checked + span {
        color: #348efc;
    }

    .course-li > label input {
        display: none;
    }

    .course-li > label:hover {
        color: #61a4f5;
    }
}
</style>